<template>
  <div style="height: 80%">
    <div class="table-box table-content">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getCustomTypeListReport"
        :init-param="initParam"
        :request-auto="true"
        :data-callback="dataCallback"
        @row-click="showCustomFieldList"
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
        :title="tableTitle1"
        row-key="eavNo"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="add">新增</el-button>
          <el-button type="primary" :icon="EditPen" plain @click="edit(scope)">编辑</el-button>
          <el-button type="primary" :icon="Delete" plain @click="del(scope)">删除</el-button>
          <!-- <el-button type="primary" :icon="Search" plain @click="search(scope)">搜索</el-button> -->
        </template>
      </ProTable>

      <el-drawer v-model="drawer" :title="`${title}自定义字段组`" :direction="direction" :before-close="handleClose">
        <el-form>
          <!-- <el-form-item label="继承类型">
            <el-select v-model="eavVal" placeholder="请选择">
              <el-option v-for="item in parentEavName" :key="item.eavNo" :value="item.eavNo" :label="item.eavName"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="岗位名称">
            <el-input v-model="typeName" placeholder="请输入内容" />
          </el-form-item>
          <!-- <el-form-item label="报表岗位名称">
            <el-input v-model="typeDesc" placeholder="请输入内容" />
          </el-form-item> -->
          <el-form-item label="操作">
            <el-button type="primary" :icon="Upload" @click="UploadGroup">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
    <div class="table-box table-content">
      <ProTable
        ref="proTable2"
        :columns="columns2"
        :request-api="getCustomFieldList"
        :init-param="initParam2"
        :request-auto="false"
        :data-callback="dataCallback2"
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
        :title="tableTitle2"
        row-key="attrNo"
      >
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="addType">新增</el-button>
          <el-button type="primary" :icon="EditPen" plain @click="editType(scope)">编辑</el-button>
          <el-button type="primary" :icon="Delete" plain @click="delType(scope)">删除</el-button>
        </template>
      </ProTable>
      <el-drawer
        v-model="drawer2"
        :title="`${title2}自定义字段(${attrTypeName})`"
        :direction="direction"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="岗位子标题">
            <el-input v-model="attrAsName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="attrType" placeholder="请选择" @change="attrTypeChange" :disabled="isdisabled">
              <el-option v-for="item in attrtypeList" :key="item.name" :value="item.value" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据字典组" v-if="showattrdataDictionary === true">
            <el-select v-model="attrdataDictionary" placeholder="请选择">
              <el-option
                v-for="item in dataDictionary"
                :key="item.groupCode"
                :value="item.groupCode"
                :label="item.groupName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="必填项">
            <el-checkbox v-model="attrIsNull"></el-checkbox>
          </el-form-item>
          <el-form-item label="所属组">
            <el-select v-model="attrGroupName" placeholder="请选择" @change="grooupChange">
              <el-option
                v-for="item in attrGroupList"
                :key="item.attrGroupId"
                :value="item.attrGroupId"
                :label="item.attrGroupName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="attrSort" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="报表输出绑定键">
            <el-input v-model="description" placeholder="请输入报表输出绑定键"></el-input>
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" :icon="Upload" @click="UploadType">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup name="customType">
import { ref, reactive, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import {
  getCustomTypeListReport,
  getCustomTypeList,
  getParentCustomTypeList,
  addCustomType,
  editCustomType,
  deleteCustomType,
  getCustomFieldList,
  getCustomGroupList_addType,
  getDataDictionaryGroup_addType,
  addCustomField,
  editCustomField,
  deleteCustomField
} from "@/api/modules/dataDictionary";
import { CirclePlus, Delete, EditPen, Search, Download, Upload, View, Refresh, InfoFilled } from "@element-plus/icons-vue";
import { FormProps, ElMessage } from "element-plus";
import type { DrawerProps } from "element-plus";
const grooupChange = () => {
  // console.log(attrGroupName);
};
const proTable = ref<ProTableInstance>();
const proTable2 = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  { type: "selection" },
  // {
  //   prop: "eavName",
  //   label: "岗位名称",
  //   sortable: true,
  //   search: {
  //     el: "input",
  //     tooltip: "输入自定义类型名称",
  //     label: "输入名称",
  //     key: "eavEntityDTO.eavName"
  //   }
  // },
  { prop: "desc", label: "岗位名称", sortable: true },
  { prop: "parentEavName", label: "继承类型", sortable: true }
]);
const columns2 = reactive<ColumnProps<any>[]>([
  { type: "selection" },
  {
    prop: "attrAsName",
    label: "岗位子标题",
    sortable: true,
    search: {
      el: "input",
      tooltip: "输入自定义类型名称",
      label: "输入名称",
      key: "attrsQueryDTO.attrAsName"
    }
  },
  { prop: "attrGroupName", label: "自定义所属字段", sortable: true },
  {
    prop: "attrType",
    label: "类型",
    sortable: true,
    render(h) {
      switch (h.row.attrType) {
        case "String":
          return "文本";
        case "Double":
          return "小数";
        case "Lob":
          return "长文本";
        case "Integer":
          return "整数";
        case "Date":
          return "日期";
        case "Radio":
          return "单选";
        case "Checkbox":
          return "复选";
        case "DataDictionaray":
          return "关联数据字典";
        default:
          return "";
      }
    }
  },
  {
    prop: "attrIsNull",
    label: "必填项",
    sortable: true,
    render: (scope: any) => {
      switch (scope.row.attrIsNull) {
        case false:
          return "是";
        case true:
          return "否";
        default:
          return "";
      }
    }
  },
  { prop: "description", label: "报表输出绑定键" },
  { prop: "sortNo", label: "排序", sortable: true }
]);
onMounted(() => {
  getParentEvaName();
  getgetCustomGroupList();
  getgetDataDictionaryGroup_addType();
});
const tableTitle1 = ref("自定义类型");
const tableTitle2 = ref("自定义字段");
const initParam = ref("");
const initParam2 = reactive({ "attrsQueryDTO.eavNo": "" });
const drawer = ref(false);
const title = ref("");
const direction = ref<DrawerProps["direction"]>("rtl");
const typeName = ref("");
const typeDesc = ref("");
const evaId = ref("");
const parentEavName = ref<any>([]);
const eavVal = ref("");
const drawer2 = ref(false);
const title2 = ref("");
const attrName = ref("");
const attrType = ref("");
const attrIsNull = ref(false);
const attrGroupList = ref<any>([]);
const dataDictionary = ref<any>([]);
const attrGroupName = ref("");
const attrSort = ref("");
const attrdataDictionary = ref("");
const description = ref("");
const remark = ref("");
const attrAsName = ref("");
const attrtypeList = [
  { name: "文本", value: "String" },
  { name: "小数", value: "Double" },
  { name: "长文本", value: "Lob" },
  { name: "整数", value: "Integer" },
  { name: "日期", value: "Date" },
  { name: "单选", value: "Radio" },
  { name: "复选", value: "checkbox" },
  { name: "关联数据字典", value: "DataDictionaray" }
];
const attrTypeName = ref("");
const showattrdataDictionary = ref(false);
const isdisabled = ref(false);
const attrNo = ref("");
const attrTypeChange = () => {
  switch (attrType.value) {
    case "DataDictionaray":
      showattrdataDictionary.value = true;
      break;
    default:
      showattrdataDictionary.value = false;
      break;
  }
};
const getgetCustomGroupList = async () => {
  const res = await getCustomGroupList_addType();
  attrGroupList.value = res.data;
};
const getgetDataDictionaryGroup_addType = async () => {
  const res = await getDataDictionaryGroup_addType();
  dataDictionary.value = res;
};
const getParentEvaName = async () => {
  const params = {
    row: 10000
  };
  const data = await getParentCustomTypeList(params);
  parentEavName.value = data.data;
};
const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const dataCallback2 = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const handleClose = () => {
  //
  drawer.value = false;
  drawer2.value = false;
};
//添加
const add = () => {
  drawer.value = true;
  title.value = "新增";
};
const UploadGroup = async scope => {
  typeDesc.value = typeName.value;
  if (title.value === "新增") {
    const params = {
      "eavEntityDTO.eavNo": "",
      "eavEntityDTO.eavCode": "",
      "eavEntityDTO.parentEavNo": eavVal.value,
      "eavEntityDTO.eavName": typeName.value,
      "eavEntityDTO.desc": typeDesc.value
    };
    if (typeName.value === "") {
      ElMessage.error("请输入名称");
    } else if (typeDesc.value === "") {
      ElMessage.error("请输入描述");
    } else {
      const data = await addCustomType(params);
      console.log(data);
      if ((data as any) === true) {
        ElMessage.success(title.value + "成功");
        drawer.value = false;
        eavVal.value = "";
        typeName.value = "";
        typeDesc.value = "";
        evaId.value = "";
        proTable.value?.getTableList();
        proTable.value?.clearSelection();
      }
    }
  } else if (title.value === "编辑") {
    const params = {
      "eavEntityDTO.eavNo": evaId.value,
      "eavEntityDTO.eavCode": "",
      "eavEntityDTO.parentEavNo": eavVal.value,
      "eavEntityDTO.eavName": typeName.value,
      "eavEntityDTO.desc": typeDesc.value
    };
    const data = await editCustomType(params);
    // console.log(data);
    if ((data as any) == true) {
      ElMessage.success(title.value + "成功");
      drawer.value = false;
      eavVal.value = "";
      typeName.value = "";
      typeDesc.value = "";
      proTable.value?.getTableList();
      proTable.value?.clearSelection();
    }
  }
};
//删除
const del = async scope => {
  //
  if (scope.selectedList.length === 0) {
    ElMessage.error("请选择要删除的数据");
    return;
  } else {
    try {
      let params = "";
      scope.selectedList.forEach(item => {
        // console.log(item.eavNo);
        params += "eavNos=" + item.eavNo + "&";
      });
      const data = await deleteCustomType(params);
      if ((data as any) === true) {
        ElMessage.success("删除成功");
        proTable.value?.clearSelection();
        proTable.value?.getTableList();
      }
    } catch (e) {
      ElMessage.error("此数据存在相关联的数据，不能删除");
    }
  }
};
//编辑
const edit = e => {
  // console.log(e);
  if (e.selectedList.length > 1 || e.selectedList.length === 0) {
    ElMessage.error("请选择一条数据");
    return;
  } else {
    drawer.value = true;
    title.value = "编辑";
    eavVal.value = e.selectedList[0].parentEavNo;
    typeName.value = e.selectedList[0].eavName;
    typeDesc.value = e.selectedList[0].desc;
    evaId.value = e.selectedList[0].eavNo;
  }
};
//
const showCustomFieldList = e => {
  console.log(initParam2);
  initParam2["attrsQueryDTO.eavNo"] = e.eavNo;
  attrTypeName.value = e.eavName;
};
//添加
const addType = () => {
  if (initParam2["attrsQueryDTO.eavNo"] === "") {
    ElMessage.error("请选择类型");
  } else {
    drawer2.value = true;
    title2.value = "新增";
    isdisabled.value = false;
    attrName.value = "";
    attrAsName.value = "";
    description.value = "";
    remark.value = "";
  }
};
const UploadType = async scope => {
  if (title2.value === "新增") {
    const params = {
      "attributesDTO.attrAsName": attrAsName.value,
      "attributesDTO.attrType": attrType.value,
      "attributesDTO.attrdataDictionary": attrdataDictionary.value,
      "attributesDTO.attrIsNull": attrIsNull.value,
      "attributesDTO.attrGroupName": attrGroupName.value,
      "attributesDTO.attrGroupNo": attrGroupName.value,
      "attributesDTO.length": "",
      "attributesDTO.sortNo": attrSort.value,
      "attributesDTO.attrName": "",
      "attributesDTO.description": description.value,
      "attributesDTO.eavNo": initParam2["attrsQueryDTO.eavNo"]
    };
    if (attrAsName.value === "") {
      ElMessage.error("请输入名称");
    } else if (attrGroupName.value === "") {
      ElMessage.error("请选择所属组");
    } else {
      // proTable2.value?.tableData.forEach(item => {
      //   if (item.attrAsName === attrName.value) {
      //     ElMessage.error("属性名称重复");
      //     return;
      //   }
      // });
      const data = await addCustomField(params);
      if ((data as any) === null) {
        ElMessage.success(title2.value + "成功");
        drawer2.value = false;
        attrName.value = "";
        attrType.value = "";
        attrdataDictionary.value = "";
        attrIsNull.value = false;
        attrGroupName.value = "";
        attrSort.value = "";
        proTable2.value?.getTableList();
      }
    }
  } else if (title2.value === "编辑") {
    const params = {
      "attributesDTO.attrAsName": attrAsName.value,
      "attributesDTO.attrType": attrType.value,
      "attributesDTO.attrdataDictionary": attrdataDictionary.value,
      "attributesDTO.attrIsNull": attrIsNull.value,
      "attributesDTO.attrGroupName": attrGroupName.value,
      "attributesDTO.attrGroupNo": attrGroupName.value,
      "attributesDTO.length": "",
      "attributesDTO.sortNo": attrSort.value,
      "attributesDTO.attrName": attrName.value,
      "attributesDTO.attrNo": attrNo.value,
      "attributesDTO.description": description.value,
      "attributesDTO.remark": remark.value,
      "attributesDTO.eavNo": initParam2["attrsQueryDTO.eavNo"]
    };
    const data = await editCustomField(params);
    if ((data as any) == null) {
      ElMessage.success(title2.value + "成功");
      drawer2.value = false;
      proTable2.value?.getTableList();
    }
  }
};
//删除
const delType = async scope => {
  if (scope.selectedList.length === 0) {
    ElMessage.error("请选择要删除的数据");
    return;
    attrNo;
  } else {
    try {
      let params = "";
      scope.selectedList.forEach(item => {
        params += "attrsIds=" + item.attrNo + "&";
      });
      const data = await deleteCustomField(params);
      if ((data as any) === true) {
        ElMessage.success("删除成功");
        proTable2.value?.clearSelection();
        proTable2.value?.getTableList();
      } else if ((data as any) === false) {
        ElMessage.error("此数据存在相关联的数据，不能删除");
        proTable2.value?.clearSelection();
        proTable2.value?.getTableList();
      }
    } catch (e) {
      ElMessage.error("此数据存在相关联的数据，不能删除");
    }
  }
};
//编辑
const editType = e => {
  console.log(e);
  if (e.selectedList.length > 1 || e.selectedList.length === 0) {
    ElMessage.error("请选择一条数据");
    return;
  } else {
    drawer2.value = true;
    title2.value = "编辑";
    isdisabled.value = true;
    attrName.value = e.selectedList[0].attrName;
    attrType.value = e.selectedList[0].attrType;
    attrdataDictionary.value = e.selectedList[0].attrdataDictionary;
    attrIsNull.value = !e.selectedList[0].attrIsNull;
    attrGroupName.value = e.selectedList[0].attrGroupNo;
    attrSort.value = e.selectedList[0].sortNo;
    attrNo.value = e.selectedList[0].attrNo;
    attrAsName.value = e.selectedList[0].attrAsName;
    description.value = e.selectedList[0].description;
    remark.value = e.selectedList[0].remark;
  }
};
</script>
<style scoped lang="scss">
// .table-box {
//   height: auto;
//   overflow-y: auto;
// }
</style>
